<!--
 描述: 3D地图
-->

<template>
    <div class="wrap-container trigle">
        <!--<div class="bar bar-img"></div>-->
        <!--<div class="bar bar-img1"></div>-->
        <!--<div class="bar bar-img2"></div>-->

        <div class="chartsdom" id="chart_3ds"></div>
    </div>
</template>

<script>
    const bmap = require('echarts/extension/bmap/bmap');

    const mapboxgl = require('mapbox-gl');  //引入组件

    // var cywc_zyq = require('../../../assets/json/xiyang.json');  //引入geojson文件

    export default {
        name: "pyramid",
        data() {
            return {
                option: null,
                baseUrl: domain.testUrl
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {

            getEchart() {

                var url = this.baseUrl + "admin/echartsgrid/echartsgrid";

                axios.get(url).then((response) => {

                    var allidlnglat = response.data.allidlnglat;

                    var dom = document.getElementById("chart_3ds");
                    var myChart = echarts.init(dom);

                    var app = {};
                    let option = null;

                    var convertData = function (data) {
                        var res = [];
                        for (let i = 0; i < data.length; i++) {
                            var geoCoord = geoCoordMap[data[i].name];
                            if (geoCoord) {
                                res.push({
                                    name: data[i].name,
                                    value: geoCoord.concat(data[i].value)
                                });
                            }
                        }
                        return res;
                    };


                    function add(num1, num2) {
                        let a1, a2, m;
                        a1 = ('' + num1).split('.')[1].length;
                        a2 = ('' + num2).split('.')[1].length;
                        m = Math.pow(10, Math.max(a1, a2));
                        return (num1 * m + num2 * m) / m;
                    }

                    function renderItem(params, api) {

                        var beginNum = 0;
                        var clickListener;
                        var beginPoints;
                        var beginMarks;
                        var polygonEditor;
                        var resPolygon = [];
                        var resNum = 0;

                        var array_points = [];

                        var array_allidlnglat = [];
                        var keyvalue_allidlnglat = [];
                        var semi_keyvalue_allidlnglat = "";

                        var KEYVAL_allidlnglat = new Map();

                        var points = [];


                        array_allidlnglat = allidlnglat.split(";");


                        for (let i = 0; i < array_allidlnglat.length; i++) {
                            points[i] = new Array();
                            beginPoints = [];
                            beginMarks = [];
                            beginNum = 0;
                            polygonEditor = '';
                            var idlnglat = [];
                            idlnglat = (array_allidlnglat[i]).split(":");
                            keyvalue_allidlnglat[i] = new Array();
                            keyvalue_allidlnglat[i][0] = idlnglat[0]; // 一个网格的中心点经度
                            //alert("keyvalue_allidlnglat[" + i + "][0] = " + keyvalue_allidlnglat[i][0]);
                            keyvalue_allidlnglat[i][1] = idlnglat[1]; // 一个网格的中心点纬度
                            //alert("keyvalue_allidlnglat[" + i + "][1] = " + keyvalue_allidlnglat[i][1]);
                            keyvalue_allidlnglat[i][2] = idlnglat[2]; // 一个网格的id
                            keyvalue_allidlnglat[i][3] = idlnglat[3]; // 一个网格的经纬度集合
                            keyvalue_allidlnglat[i][4] = idlnglat[4]; // 一个网格的名字
                            array_points = (idlnglat[3]).split(",");

                            var res = [];

                            // 解析一个idlnglat的经纬度集合
                            for (var j = 0; j < array_points.length / 2; j++) {
                                res[j] = new Array();
                                res[j][0] = add(window.parseFloat(array_points[j * 2]), 0.00659);
                                res[j][1] = add(window.parseFloat(array_points[(j * 2) + 1]), 0.0057);


                                points[i].push(api.coord(res[j]));


                                beginNum++;
                            }


                        };

                        console.log(params);



                        return {
                            type: 'group',
                            children: [{
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[0], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[1], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[2], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[3], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[4], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[5], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[6], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[7], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[8], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[9], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            }, {
                                type: 'polygon',
                                shape: {
                                    points: echarts.graphic.clipPointsByRect(points[10], {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    })
                                },
                                style: api.style({
                                    fill: '#f4e925',
                                    stroke: echarts.color.lift('#f4e925')
                                })
                            },]
                        };
                    }


                    option = {
                        // backgroundColor: 'transparent',
                        tooltip: {
                            trigger: 'item'
                        },
                        bmap: {
                            center: [113.7137, 37.6184],
                            zoom: 17,
                            roam: true,
                            mapStyle: {

                            }
                        },
                        series: [
                            {
                                type: 'custom',
                                coordinateSystem: 'bmap',
                                renderItem: renderItem,
                                itemStyle: {
                                    opacity: 0.3,
                                },
                                animation: false,
                                silent: true,
                                data: [0],
                                z: -10
                            }
                        ]
                    };

                    myChart.setOption(option, true);


                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }

        },
        beforeDestroy() {
        }
    };
</script>
<style type="text/css">
    .anchorBL a {
        display: none;
    }

    .anchorBL img {
        display: none;
    }

    .anchorBL span {
        display: none !important;
    }
</style>
<style lang="scss" scoped>
    .trigle {
        left: 455px;
        top: 230px;
        width: 1012px;
        height: 660px;
        .chartsdom {
            width: 100%;
            height: 100%;
        }


        .bar {
            width: 100%;
            height: 100%;
            position: absolute;
            &.bar-img {
                bottom: 0;
                background: url(../../../assets/img/bk_circle.png) no-repeat center 97%;
                background-size: 100%;
                filter: hue-rotate(180deg);
            }
            &.bar-img1 {
                bottom: 30%;
                background: url(../../../assets/img/bk_circle1.png) no-repeat center 97%;
                background-size: 75%;
                filter: hue-rotate(180deg);
            }
            &.bar-img2 {
                bottom: 60%;
                background: url(../../../assets/img/bk_circle2.png) no-repeat center 97%;
                background-size: 50%;
                filter: hue-rotate(180deg);
            }
        }

    }
</style>
